<template>
  <!--  选择器-->
  <el-cascader
    v-if="tier"
    :options="tree"
    :value="value"
    :props="{
      value: 'id',
      label: 'label',
      children: 'children',
      emitPath: false,
      checkStrictly: true,
    }"
    clearable
    filterable
    :show-all-levels="false"
    :disabled="disabled"
    @input="change($event)"
  />

  <el-select
    v-else
    :value="value"
    :loading="loading"
    :multiple="multiple"
    :size="isMini"
    :placeholder="placeholder"
    :disabled="disabled"
    v-bind="$attrs"
    @input="change($event)"
    @focus="search"
    v-on="$listeners"
  >
    <el-option
      v-for="(item, index) in list"
      :key="index"
      :label="item.name"
      :value="item.id"
    />
    <el-pagination
      v-if="paging"
      :total="total"
      :current-page.sync="page"
      :page-size="limit"
      layout="prev, pager, next"
      small
      @current-change="pagination"
    />
  </el-select>
</template>

<script>
import API from '../api/common/select'
import { arr2Tree } from '@/utils/help'
export default {
  props: {
    multiple: {
      type: Boolean,
      default: false
    },
    paging: {
      type: Boolean,
      default: true
    },
    value: {
      type: [Number, Array],
      default: null
    },
    action: {
      type: String,
      default: 'adminList'
    },
    query: {
      type: Object,
      default() {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    },
    tier: {
      type: Boolean,
      default: false
    },
    isTop: {
      type: Boolean,
      default: false
    },
    top: {
      type: Object,
      default() {
        return {
          id: 0,
          name: '顶级分类'
        }
      }
    },
    isMini: {
      type: String,
      default: 'mini'
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      list: [],
      remote: false,
      loading: false,
      page: 1,
      limit: 150000,
      total: 0
    }
  },
  computed: {
    tree() {
      return arr2Tree(this.list)
    }
  },
  watch: {
    // action() {
    //   this.index()
    // },
    value(newVal, oldVal) {
      if (!this.multiple) {
        if (newVal && !oldVal) {
          this.index({ id: newVal })
        }
      }
    }
    // ,
    // query: {
    //   deep: true,
    //   handler() {
    //     this.search()
    //   }
    // }
  },
  created() {
    if (this.paging) {
      this.limit = 10
    }
    this.index()
  },
  methods: {
    pagination() {
      this.index({ page: this.page, limit: this.limit, ...this.query })
    },
    search() {
      this.page = 1
      this.index({ page: this.page, limit: this.limit, ...this.query })
    },
    index(query = {}) {
      Object.assign(query, this.query)
      this.loading = true
      API.option({
        query,
        action: this.action
      }).then((response) => {
        if (response.data.data) {
          this.total = response.data.total
          this.loading = false
          this.list = response.data.data
          if (this.isTop) {
            this.list.unshift(this.top)
          }

          const thisSon = []
          for (let i = 0; i < response.data.data.length; i++) {
            thisSon.push(response.data.data[i].id)
          }
          if (!this.multiple) {
            if (thisSon.indexOf(this.value) < 0) {
              this.$emit('input', null)
            }
          }
        } else {
          if (response.data.error_code) {
            this.loading = false
            this.list = null
            this.$emit('input', null)
          } else {
            this.loading = false
            this.list = response.data
            const thisSon = []
            for (let i = 0; i < response.data.length; i++) {
              thisSon.push(response.data[i].id)
            }
            if (thisSon.indexOf(this.value) < 0) {
              this.$emit('input', null)
            }
          }
        }
        // if (response.data.total !== undefined) {
        //   this.is_page = true;
        //   this.remote = true;
        //   this.total = response.data.total;
        // }

        // this.tier || this.list.unshift({ id: 0, label: "请选择" });
      })
    },
    change: function(val) {
      this.$emit('input', val)
    }
  }
}
</script>
